 <!DOCTYPE html>
 <html lang="en">

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../../lib/bootstrap-5.3.0/css/bootstrap.min.css">
   <link href="../../lib/layui-v2.8.12/src/css/layui.css" rel="stylesheet">
   <link rel="stylesheet" href="../../lib/bootstrap-5.3.0/js/bootstrap.bundle.min.js">
   <title>Document</title>
   <style>
     .card {
       width: 400px;
       margin: 20px auto;
     }

     .card-title {
       font-size: 30px;
       font-weight: bold;
       margin: 0 auto;
       text-align: center;
       margin-bottom: 20px;
     }

     .layui-text {
       font-size: 16px;
     }
   </style>
 </head>

 <body>
   <div class="card">
     <img class="card-img-top" src="../../img/guoqi/agentin.svg" alt="Card image" style="width:100%">
     <div class="card-body">
       <h4 class="card-title">John Doe</h4>
       <blockquote class="layui-elem-quote layui-text">
       </blockquote>
     </div>
   </div>
   <?php
    DEFINE('DB_USER', 'worldcup');
    DEFINE('DB_PASSWORD', '123456');
    DEFINE('DB_HOST', 'localhost');
    DEFINE('DB_NAME', 'worldcup');

    $dbc = @mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
    if (!$dbc) {
      die('Could not to connect to Mysql:' . mysqli_connect_error());
    }
    mysqli_set_charset($dbc, 'utf8');

    $teamId = $_GET['teamId'];
    $sql = "select team_name,team_desc from team where team_id=$teamId;";
    $res = mysqli_query($dbc, $sql);
    if (!$res) {
      printf("Error: %s\n", mysqli_error($dbc));
      exit();
    }
    $result = mysqli_fetch_assoc($res);
    ?>
   <script>
     let res = <?php echo json_encode($result); ?>;
     console.log(res);
     document.querySelector('.card-title').innerHTML = res.team_name
     document.querySelector('.layui-text').innerHTML = res.team_desc
   </script>
 </body>

 </html>